<template>
  <div class="level-box">
    <h1>医院</h1>
    <div class="contain">
      <div class="context-title">等级：</div>
      <ul class="context-cate">
        <li :class="{ active: indexId === -1 }" @click="triggerLevel()">
          全部
        </li>
        <li
          v-for="(item, index) in levelDate"
          :key="item.id"
          :class="{ active: indexId === index }"
          @click="triggerLevel(item.value, index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "LevelContext",
  data() {
    return {
      indexId: -1,
    };
  },
  methods: {
    triggerLevel(val, index) {
      this.$emit("triggerLevel", val);
      if (index === 0 || index) {
        this.indexId = index;
      } else {
        this.indexId = -1;
      }
    },
  },
  props: ["levelDate"],
};
</script>

<style lang="scss" scoped>
.level-box {
  margin: 5px 0;
  h1 {
    font-size: 16px;
    font-weight: 700;
    color: #7f7f7f;
    margin: 10px 0;
  }
  .contain {
    font-size: 16px;
    width: 100%;
    color: #7f7f7f;
    display: flex;
    flex-wrap: wrap;
    .context-title {
      width: 50px;
    }
    .context-cate {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      li {
        &.active {
          color: #55a6fe;
        }
        margin-right: 10px;
        margin-bottom: 10px;
        &:hover {
          color: #55a6fe;
          /* 鼠标经过时出现小手 */
          cursor: pointer;
        }
      }
    }
  }
}
</style>
